<template>
  <a-card title="短信配置" :body-style="{ padding: '32px 0' }" :bordered="false">
    <a-form @submit="handleSubmit" :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="服务提供商" has-feedback>
        <a-select
          style="width: 100%"
          placeholder="请选择服务提供商"
          v-decorator="['code', { rules: [{ required: true, message: '请选择服务提供商！' }] }]"
        >
          <a-select-option
            v-for="(item, index) in providers"
            :key="index"
            :value="item.dictKey"
            @click="changeProvider(item.dictKey)"
          >
            {{ item.dictValue }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="模版ID" has-feedback>
        <a-input
          placeholder="请输模版ID"
          v-decorator="['templateId', { rules: [{ required: true, message: '请输入模版ID！' }] }]"
        />
      </a-form-item>

      <a-form-item label="accessKey" has-feedback>
        <a-input
          placeholder="请输入accessKey"
          v-decorator="['accessKey', { rules: [{ required: true, message: '请输入accessKey！' }] }]"
        />
      </a-form-item>

      <a-form-item label="secretKey" has-feedback>
        <a-input
          placeholder="请输入secretKey"
          v-decorator="['secretKey', { rules: [{ required: true, message: '请输入secretKey！' }] }]"
        >
          <a-tooltip slot="suffix" title="点击查看密钥">
            <a-icon type="eye" style="color: rgba(0,0,0,.45)" @click="displaySecret()" />
          </a-tooltip>
        </a-input>
      </a-form-item>

      <a-form-item label="regionId" has-feedback>
        <a-input
          placeholder="请输入regionId"
          v-decorator="[
            'regionId',
            { initialValue: 'cn-hangzhou', rules: [{ required: true, message: '请输入regionId！' }] },
          ]"
        />
      </a-form-item>

      <a-form-item label="短信签名" has-feedback>
        <a-input
          placeholder="请输入短信签名"
          v-decorator="['signName', { rules: [{ required: true, message: '请输入短信签名！' }] }]"
        />
      </a-form-item>

      <a-form-item label="备注" has-feedback>
        <a-input
          placeholder="请输入备注"
          v-decorator="['remark', { rules: [{ required: false, message: '请输入备注！' }] }]"
        />
      </a-form-item>

      <a-form-item v-if="hasPerm('set:edit')" :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button @click="handleSubmit" type="primary">保存并默认</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
// import { sysDictTypeDropDown } from '@/api/modular/system/dictManage';
import { smsCheck, getOssSecret, saveSms, getSms } from '@/api/modular/system/setManage';
export default {
  data() {
    return {
      providers: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
    };
  },
  created() {
    // 初始化字典
    this.dataTypeItem();
    // 初始化默认OSS
    this.initOss();
  },
  methods: {
    /**
     * 初始化OSS
     */
    initOss() {
      smsCheck().then(res => {
        if (res.success) {
          if (res.data !== '') {
            this.form.setFieldsValue({
              code: res.data,
            });
            this.changeProvider(res.data);
          }
        }
      });
    },
    /**
     * 提交保存
     */
    handleSubmit() {
      const {
        form: { validateFields },
      } = this;
      this.confirmLoading = true;
      validateFields((errors, values) => {
        if (!errors) {
          saveSms(values)
            .then(res => {
              if (res.success) {
                this.$message.success('新增成功');
                this.visible = false;
                this.confirmLoading = false;
                this.$emit('ok', values);
                this.form.resetFields();
                this.initOss();
              } else {
                this.$message.error('新增失败：' + res.message);
              }
            })
            .finally(res => {
              this.confirmLoading = false;
            });
        } else {
          this.confirmLoading = false;
        }
      });
    },
    /**
     * 切换OSS服务提供商
     */
    changeProvider(value) {
      getSms({ code: value }).then(res => {
        if (res.success) {
          if (res.data === null || res.data === '') {
            this.form.resetFields();
            this.form.setFieldsValue({
              code: value,
            });
            return;
          }
          this.form.setFieldsValue(res.data);
        }
      });
    },
    /**
     * 显示密钥
     */
    displaySecret() {
      getOssSecret({ provider: this.form.getFieldValue('code') }).then(res => {
        if (res.success) {
          this.form.setFieldsValue({ secretKey: res.data });
        }
      });
    },
    /**
     * 获取字典数据
     */
    dataTypeItem() {
      this.providers = this.$options.filters['dictData']('sms');
      console.log(this.providers);
    },
  },
};
</script>
